<template>
  <div class="descBox" style="position: relative;">
    <div
      style="padding: 12px 16px 12px;background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 100%);"
      :style="{background:isDark?'#2b5477':'linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 100%)'}">
      <div class="title" v-if="modTitle != ''" :style="{color:isDark?'#fff':''}">
        <svg-icon icon-class="biaotitubiao" />
        {{modTitle}}
      </div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-input clearable v-model="state.treeSearch" placeholder="请输入关键词搜索">
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="24">
          <!-- node-key="menuId" 防止页面卡死 -->
          <el-tree ref="treeRef" class="filter-tree" :style="{backgroundColor:isDark?'#2b5477':''}" :data="cateList"
            :props="state.defaultProps" node-key="menuId" default-expand-all :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span v-if="data.meta&&data.path!='/'" style="display:flex;justify-content: space-between;
              align-items: center;width:100%;">
                <span>
                  <svg-icon :icon-class="data.meta.icon" />
                  {{data.meta.title}}</span>
                <span>
                  <el-switch size="small" v-if="!data.redirect" v-model="data.isCommon"
                    @change="switchChange($event,data,node)" />
                </span>
              </span>
              <span v-if="!data.meta&&data.children" style="display:flex;
              justify-content: space-between;align-items: center;width:100%;">
                <span>
                  <svg-icon :icon-class="data.children[0].meta.icon" />
                  {{data.children[0].meta.title}}</span>
                <span>
                  <el-switch @change="switchChange($event,data,node)" size="small" v-if="!data.redirect&&!data.children"
                    v-model="data.children[0].isCommon" />
                </span>
              </span>
            </template>
          </el-tree>
        </el-col>
      </el-row>
      <div style="display: flex;justify-content: space-between;position: sticky;
      background-color: #fff;
      bottom: 10px;left: 0;width: 100%;z-index: 11;" :style="{background:isDark?'#2b5477':''}">
        <el-popover placement="top-start" :width="200" trigger="hover">
          <div style="width: 100%;">
            <el-tag style="width: 100%;text-align: left;margin-bottom: 6px;" v-for="tag in state.acList"
              :key="tag.menuId" closable @close="handleClose(tag)">
              {{ tag.meta.title }}
            </el-tag>
          </div>
          <template #reference>
            <el-button :style="{background:isDark?'#2b5477':''}">
              已分配{{ state.acList.length}}个，剩余可配{{ 6-state.acList.length }}个</el-button>
          </template>
        </el-popover>
        <span style="display: flex;">
          <el-button type="info" @click="cancelClick">返回</el-button>
          <el-button type="primary" @click="submitClick">确定</el-button>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
  import {
    computed,
    nextTick,
    reactive,
    watchEffect
  } from "vue";
  import axios from "@/utils/request";
  import * as echarts from "echarts";
  import dayjs from "dayjs";
  import {
    groupTreeByProperty
  } from "@/utils/trrtofrom";
  import {
    searchchannelNoList
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  import usePermissionStore from '@/store/modules/permission'
  import useSettingsStore from '@/store/modules/settings'
  import _ from 'lodash'
  const {
    proxy
  } = getCurrentInstance();
  const permissionStore = usePermissionStore()
  const userStore = useUserStore();
  const sidebarRouters = computed(() => permissionStore.sidebarRouters);
  const settingsStore = useSettingsStore()
  const isDark = computed(() => settingsStore.isDark);
  const cateList = []
  sidebarRouters.value.forEach(item => {
    if (!item.hidden) {
      cateList.push(item)
    }
  })
  const emits = defineEmits([''])
  const props = defineProps({
    resultArray: {
      type: Array,
      default: () => {
        return []
      }
    },
    descList: {
      type: Array,
      default: () => {
        return [{
            name: "编号",
            value: "012D01",
            col: 4,
          },
          {
            name: "名称",
            value: "开关",
            col: 4,
          },
          {
            name: "安装地点",
            value: "05采煤工作面回风巷105米处",
            col: 16,
          },
        ];
      },
    },
    modTitle: {
      type: String,
      default: ''
    }
  });
  const state = reactive({
    defaultProps: {
      children: 'children',
      label: 'name',
    },
    acList: [],
  })
  groupTreeByProperty(cateList, 'isCommon').forEach(item => {
    if (item.isCommon) {
      state.acList = item.items
    }
  })
  const handleClose = (tag) => {
    state.acList.splice(state.acList.indexOf(tag), 1)
  }


  function switchChange(val, data, node) {
    nextTick(() => {
        if (data && val) {
          if (state.acList.length < 6) {
            state.acList.push(data)
          } else {
            data.isCommon=false
            proxy.$modal.msgWarning('只能选择6条数据！');
          }
        } else {
          const filteredArray = state.acList.reduce((acc, item) => {
            if (item['name'] !== data.name) {
              acc.push(item);
            }
            return acc;
          }, []);
          state.acList = filteredArray
        }
    })
  }

  function submitClick() {
    axios.post('system/menu/editBatch', state.acList.map(item => {
      return {
        menuId: item.menuId,
        isCommon: true
      }
    })).then(res => {
      emits('carduseClick', false)
    })
  }

  function cancelClick() {
    emits('carduseClick', false)
  }
  state.acList = props.resultArray
  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .switch-container {
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 10;
  }

  .switch-container>* {
    pointer-events: auto;
  }

  :deep(.el-tag) {
    justify-content: space-between;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .el-col {
    margin-bottom: 16px;
  }

  .descBox {
    // max-height:150px;
    border-radius: 4px;
    background: rgba(68, 136, 255, 1);
    // padding: 12px 16px 12px;
    box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.2);

    p {
      padding: 0;
      margin: 0px 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }

    .topdesc {
      color: rgba(62, 70, 79, 0.6);
    }

    .bottomdesc {
      color: rgba(62, 70, 79, 1);
      margin-bottom: 0 !important;
    }
  }

  .title {
    height: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #3e464f;

    .colorarea {
      margin-right: 6px;
      width: 4px;
      height: 14px;
      background-color: #409eff;
    }
  }
</style>